<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
v-for 遍历指令，可以遍历数组，对象和数字
语法：
v-for="(item,index) in 数组"
使用v-for的时候一定要把 :key 加上，给元素添加唯一标识，便于vue进行列表项的正确排序复用
:key 绑定的时候使用唯一标识，不推荐使用index,因为index总是改变
-->

<body>
    <div id="app">
        <div>
            <h1>水果店</h1>
            <ul>
                <li v-for="(item,index) in fruits" :key="item">{{index}} - {{item}}</li>
            </ul>
        </div>
        <hr>
        <img v-for="item in images" v-bind:src="item">
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                images: ['./images/image1.png', './images/image2.png', './images/image3.png', './images/image4.png'],
                fruits:['苹果','香蕉梨子','橘子']
            }
        })
    </script>

</body>

</html>